import React from 'react';
import Lucy from "./Lucy";
import Lily from "./Lily";

class Practice extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            lucyResponse: null,
            lilyResponse: null,
        }
    }

    lucyCall = function (res) {
        this.setState({
            lucyResponse: res,
        })
    };

    lilyCall = function (res) {
        this.setState({
            lilyResponse: res,
        })
    };
    render() {
        const {lucyResponse, lilyResponse} = this.state;
        return (
            <div>
                <h3>Practice</h3>
                <div><Lucy message='do you want to practice?' call={e => this.lucyCall(e)}/>, <span>{lucyResponse}</span></div>
                <div>
                    <Lily message={"do you want a apple?"} call={e => this.lilyCall(e)}>
                        <span>cha cao</span>
                    </Lily>, <span>{lilyResponse}</span>
                </div>
            </div>
        );
    }
}
export default Practice